﻿@{
    ViewBag.Title = "Performance of developers overview";   
}
<h2>
    Performance of developers overview</h2>
<div id="example" class="k-content">
    <div class="chart-wrapper">
        <div id="chart">
        </div>
    </div>
    <script type="text/javascript">
        function createChart() {

            $.ajax({
                cache: false,
                url: '/Report/GetReportData',
                dataType: 'json',
                success: function (data) {
                    if (data != null) {
                        var reportData = new Array(), reportCategories = new Array(), charHeight = i = data.length - 1;

                        if (charHeight < 10) {
                            charHeight = 40;
                        } else {
                            charHeight = charHeight * 30;
                        }

                        var str = JSON.stringify(data);
                        for (; i--; ) {
                            reportData.push(data[i].Value);
                            reportCategories.push(data[i].Developer);
                        }

                        var report = {
                            theme: $(document).data("kendoSkin") || "default",
                            title: {
                                text: "Developer Tasks Overview"
                            },
                            legend: {
                                position: "bottom"
                            },
                            chartArea: {
                                background: "",
                                height: charHeight
                            },
                            seriesDefaults: {
                                type: "bar"
                            },
                            series: [{
                                name: "Value",
                                data: reportData
                            }],
                            valueAxis: {
                                labels: {
                                    format: "{0}"
                                }
                            },
                            categoryAxis: {
                                categories: reportCategories
                            },
                            tooltip: {
                                visible: true,
                                format: "{0}"
                            }
                        };

                        $("#chart").kendoChart(report);
                    }

                },
                error: function (e) {


                }
            });



        }

        $(document).ready(function () {
            setTimeout(function () {
                // Initialize the chart with a delay to make sure
                // the initial animation is visible
                createChart();

                $("#example").bind("kendo:skinChange", function (e) {
                    createChart();
                });
            }, 400);
        });
    </script>
</div>
